<template>
    <el-dialog :append-to-body="true" :before-close="handleClose" :visible.sync="visible">
      <div style="margin-top:-25px;">
        <div class="dialog-title">
          <span>{{ isCreate ? '创建公域任务' : '编辑公域任务' }}</span>
        </div>
        <el-form :model="form" status-icon ref="form" label-width="100px" @submit.native.prevent>
          <el-form-item label="主题" prop="put_title">
            <el-input size="medium" v-model="form.put_title" placeholder="请填写主题"></el-input>
          </el-form-item>
          <el-form-item label="项目" prop="project_id">
                <el-autocomplete
                  @focus="loadSpuSuggestions"
                  popper-class="my-autocomplete"
                  class="inline-input"
                  v-model="projectState"
                  :fetch-suggestions="queryProjectSearch"
                  placeholder="请填写项目"
                  @select="handleProjectSelect"
                >
                  <template slot-scope="{ item }">
                    <span class="id">{{ item.id }}</span>
                    <span class="title">{{ item.title }}</span>
                  </template>
                </el-autocomplete>
          </el-form-item>
          <el-form-item label="截止时间" prop="end_time">
            <el-date-picker
                v-model="form.end_time"
                type="date"
                :picker-options="pickerOptions"
                placeholder="选择日期"
                @change="dateChange">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input size="medium" v-model="form.remark" type="textarea" :rows="3" placeholder="请填写描述">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="padding-left:5px;">
        <el-button type="primary" @click="submitForm" v-permission="{ permission: '编辑公域任务', type: 'disabled' }"
          >确 定</el-button
        >
        <el-button @click="resetForm('form')">重 置</el-button>
      </div>
    </el-dialog>
  </template>
  <script>

    import CommonJobModel from '@/model/common-job'
    import Project from '@/model/project'
  
  export default {
    props: {
      dialogFormVisible: {
        type: Boolean,
        default: false,
      },
      isCreate: {
        type: Boolean,
        default: false,
      },
      commonJobId: {
        type: Number,
        default: 0,
      },
    },
    computed: {
        visible: {
            get() {
                return this.dialogFormVisible
            },
            set() {},
        },
    },
    data() {
      return {
        display: true,
        initData: [],
        maxNum: 1,
        form: {
            put_title: '',
            project_id: 0,
            end_time: '',
            remark: '',
        },
        projectState: '',
        projectList: [],
        pickerOptions: {
            disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
          },
        }
      }
    },
    async mounted() {
      if (!this.isCreate) {
        const res = await CommonJobModel.get(this.commonJobId)
        const project = await Project.get(res.project_id)
        this.form = res
        this.projectState = project.title
      }
    },
    methods: {
      async submitForm() {
        const form = { ...this.form }
        console.log(form)
        let res
        if (this.isCreate) {
          res = await CommonJobModel.create(form)
        } else {
          res = await CommonJobModel.update(this.commonJobId, form)
        }
        if (res.code < window.MAX_SUCCESS_CODE) {
          this.$message.success(`${res.message}`)
          this.$emit('dialogClose')
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      handleClose(done) {
        done()
        this.$emit('dialogClose')
      },
      queryProjectSearch(queryString, cb) {
            // eslint-disable-next-line
            const suggestions = this.projectList
            const results = queryString ? suggestions.filter(this.createProjectFilter(queryString)) : suggestions
            cb(results)
        },
        createProjectFilter(queryString) {
        // eslint-disable-next-line
        return suggestion => {
            return suggestion.title.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        }
        },
        handleProjectSelect(item) {
            this.projectState = item.title
            this.form.project_id = item.id
            // this.loadKeyAndValues(item.id)
        },
        async loadSpuSuggestions() {
            if (this.projectList.length > 0) {
                return
            }
            try {
                this.projectList = await Project.getAll()
                if (this.projectList.length === 0) {
                this.$message.error('未找到SPU建议，请先添加SPU')
                }
            } catch (error) {
                this.$message.error('获取SPU建议信息失败')
                console.error(error)
            }
        },
        dateChange(val) {
            const date = new Date(val)
            const yyyy = date.getFullYear()
            const MM = date.getMonth() + 1
            const dd = date.getDate()
            this.form.end_time = yyyy + '-' + MM + '-' + dd
        }
    },
  }
  </script>
  <style lang="scss" scoped>
  .dialog-title {
    color: $parent-title-color;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;

    .back {
      float: right;
      margin-right: 40px;
      cursor: pointer;
    }
  }

  .wrap {
    padding: 20px;
  }

  .submit {
    float: left;
  }
}
  .my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;
        display: inline-flex;
        align-content: space-around;
        .title {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .id {
        margin-right: 15px;
        font-size: 12px;
        color: #b4b4b4;
        }

        .highlighted .addr {
        color: #ddd;
        }
    }
  }
  </style>
  